$(function () {
    // Build the chart
    var option1 = {
        title: {
            show:true,
            text:'',
            // subtext :'2部6.67%',
            x:'center',
            y:'center',
            // left: 'center',
            // top: 'center',
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}条 ({d}%)",
            textStyle:{
                align:'left'
            },
        },
        color:['#1880FE','#FF625B','#9183F5','#FDC401','#0CC4C6'],
        legend: {
            show: true,
            orient:"vertical",
            width:200,              // 宽度
            itemGap: 10,            // 间隔
            itemWidth: 10,          // 图形宽度。
            itemHeight: 10,
            bottom: '0%',
            left: 'left',
            // data:[],
            formatter: [
                '{a|{name}}'+'{b|}'
            ].join('\n'),//图例换行对齐
            textStyle: {
                rich: {
                    a: {
                        width: 55,
                        // color: '#909399',
                        fontSize: 12,
                        lineHeight: 12
                    }
                },
            },
        },
        series: [{
            name: '立法形式占比',
            type: 'pie',
            center: ['50%', '40%'],
            radius: ['45%', '65%'],
            selectedMode: 'single',
            avoidLabelOverlap: false,
            label: {
                normal:{
                    show:false,
                    position:'center',
                    // formatter: '{name|{b}}\n{time|{c} 小时}',
                    formatter: '{name|{b}}\n{num|{c}条}占比{time|{d} %}',
                    // formatter: "{b} : {c}部\n占比{d}%",
                    fontSize:12,
                    color:"#30A4F6",
                    textStyle: {
                        rich:{
                            name:{
                                fontSize: '30',
                                color: "#000"
                            },

                        }
                        // color: 'white',  // 改变标示文字的颜色
                        // fontSize:12,//文字大小
                    },
                },

                // show: true
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '12',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false,
                length:30,
                length2:15,
                smooth:false,
                minTurnAngle:90,
                maxSurfaceAngle:90
            },
            data: [{
                name: '制定',
                value: 2,
                selected: true,
            }, {
                name: '批准',
                value: 13,
            }, {
                name: '废止',
                value: 2,
            }, {
                name: '修改',
                value:11 ,
            }, {
                name: '修订',
                value: 2,
            }]
        }]
    };
    var myChart1 = echarts.init(document.getElementById("chart1"));
    // myChart1.setOption(option1);
    // window.addEventListener("resize",function(){//适应div大小
    //     myChart1.resize();
    // });
    function emphasis(){
        var dataLen = option1.series[0].data.length;
        // 高亮当前图形
        myChart1.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 0
        });
    }
    function unemphasis(){
        var dataLen = option1.series[0].data.length;
        // 取消之前高亮的图形
        myChart1.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: 0
        });
    }

    myChart1.setOption(option1);
    window.addEventListener("resize",function(){//适应div大小
        myChart1.resize();
    });
    emphasis();
    myChart1.on('mouseover', function(a){
        if(a.dataIndex!=0){
            unemphasis();
        }
    })
    myChart1.on('mouseout', function(){
        emphasis();
    })

    //立法形式柱状图
    var option = {
        grid: {
            top: '8%',
            left: '7%',
            right: '7%',
            bottom: '8%',
            containLabel: true
        },
        title: {
            text: ''
        },
        legend: {
            show: false
        },
        xAxis: {
            type: 'category',
            data: ['经济建设类', '社会建设类', '政治建设类', '文化建设类', '经济管理类', '社会管理类'],
            axisLabel: {
                interval: 0,
                rotate: 0,
                fontSize: 10,
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 0.7,
                    color: '#666666'
                }
            },
            axisTick: {
                show: true,
                inside: true,
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            name: '件',
            nameLocation: 'end',
            nameGap: 15,
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dotted'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    width: 0.7,
                    color: '#666'
                }
            }
        },
        tooltip: {
            // trigger: 'axis',
            textStyle: {
                align: 'left'
            },
            formatter: '{a0}<br />{b0}: {c0}件'
        },
        series: [{
            name: '立法形式',
            data: [97, 47, 17, 6, 3, 3],
            color: '#1680FD',
            type: 'bar',
            barWidth: 30,//柱图宽度
        }]
    };
    var myChart = echarts.init(document.getElementById("chart2"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {//适应div大小
        myChart.resize();
    });

    //立法状态
    var option2 = {
        grid: {
            top: '8%',
            left: '7%',
            right: '7%',
            bottom: '8%',
            containLabel: true
        },
        title: {
            text: ''
        },
        legend: {
            show: false
        },
        xAxis: {
            type: 'category',
            data: ['有效', '无效'],
            axisLabel: {
                interval: 0,
                rotate: 0,
                fontSize: 10,
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 0.7,
                    color: '#666666'
                }
            },
            axisTick: {
                show: true,
                inside: true,
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            name: '件',
            nameLocation: 'end',
            nameGap: 15,
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dotted'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    width: 0.7,
                    color: '#666'
                }
            }
        },
        tooltip: {
            // trigger: 'axis',
            textStyle: {
                align: 'left'
            },
            formatter: '{a0}<br />{b0}: {c0}件'
        },
        series: [{
            name: '立法状态',
            data: [
                {
                    itemStyle: {
                        color: '#1680FD'
                    },
                    'value':97
                },
                {
                    itemStyle: {
                        color: '#A3CDFF'
                    },
                    'value':47
                } ],
            type: 'bar',
            barWidth: 30,//柱图宽度
        }]
    };
    var myChart2 = echarts.init(document.getElementById("chart3"));
    myChart2.setOption(option2);
    window.addEventListener("resize", function () {//适应div大小
        myChart2.resize();
    });
});